<template>

	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<!--选项卡0的布局样式-->
		<view class="  commoncss0   ">
			<scroll-view scroll-x class=" bg-white nav text-center">
				<view class=" flex justify-start ">
					<view class="cu-item" :class="item.tabval==state?'text-blue text-df  cur':''" v-for="(item,index) in label0List" :key="index"
						@tap="tabSelect0(item)" :data-id="index">
						{{item.tabname}}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 订单列表的布局样式 -->
		<view class="  label1  commoncss1   ">
			<view class="cu-card article no-card">
				<view class="cu-item shadow" style="padding: 25rpx 0;" @tap="gourl1(item)" v-for="(item,index) in data.records" :key="index">
					<view class="orderNo"> 订单号：{{item.orderNo}} </view>
					<view class="cu-tag round bg-orange light" style="float:right;">
						{{dict.convert("ORDER_STATE", item.state)}}
					</view>
					<view class="content" style="padding: 0; flex-direction:row">
						<image class=" margin-lr-sm goodsImage" :src="JSON.parse(item.goodsDetails).coverPic" mode="aspectFill">
						</image>
						<view class="desc margin-lr-sm">
							<text class=" text-black text-lg ellipsisText"> {{JSON.parse(item.goodsDetails).name}}</text>
							<view class="text-black ellipsisText">{{JSON.parse(item.goodsDetails).goodsSpecsList[0].specsName}}</view>
							<view class="text-gray price"> ￥{{item.totalPrice}}</view>
							<view class="flex justify-between">
								<view class="text-gray">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 分页 -->
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text> 共 {{ data.total }} 条 - {{ data.pages }} / {{ data.current }} 页 </text>
			</view>
			<!-- 分页数 -->
			<view class="padding flex flex-wrap justify-between align-center bg-white">
				<button @tap="prePage()" style="" class="cu-btn">上一页</button>
				<button @tap="nextPage()" class="cu-btn">下一页</button>
			</view>
		</view>
	</view>
</template>


<script>
	/**    author:Mr.yang    **/
	/**    qq:987095529   **/
	/**    wx:wx987095529   **/
	import pageUtil from '@/static/js/pageUtil.js' // 分页
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				noMore: false,
				/**single**/
				//      V1(1, "已下单"),    // -
				//      V2(2, "已支付"),    // -
				//      V3(3, "已发货"),    // -
				//      V4(4, "已完成"),    // -
				//      V5(5, "用户取消"),    // -
				//      V6(6, "平台拒单"),    // -
				//      V7(7, "支付失败"),    // -
				//      V8(8, "订单超时"),    // 15分钟时间不支付自动超时
				label0List: [{
						"tabname": "全部",
						"tabval": "",
					}, {
						"tabname": "待支付",
						"tabval": "1",
					}, {
						"tabname": "已支付",
						"tabval": "2",
					}, {
						"tabname": "已完成",
						"tabval": "4",
					},
					{
						"tabname": "已取消",
						"tabval": "5",
					},
				],

				data: {records:[]}, // 数据
				state: "", // tab 数据搜索状态
				current: 1, // 页数 
				size: 5, // 每页条数
			};
		},
		onLoad() {
			// 查询数据
			this.findPage();
		},
		onShow(){
			// 查询数据
			this.findPage();
		},
		
		methods: {

			/**
			 * 切換 状态
			 */
			tabSelect0(item) {
				this.state = item.tabval;
				// 查询数据
				this.findPage();
			},
			/**
			 * 点击订单
			 */
			gourl1(item) {
				uni.navigateTo({
					url: "/pages/fpage3/order/details?orderId=" + item.id
				});
			},
			/**
			 *  查询我的订单
			 */
			findPage() {
				let param = {
					current: this.current,
					size: this.size,
					state: this.state
				}
				this.crud.get(this.path, "/api/client/all/order/findPage", param).then(res => {
					this.data = res.data.data;
				})
			},
			/**
			 * 上一页
			 */
			prePage() {
				pageUtil.prePage(this)
			},
			/**
			 * 下一页
			 */
			nextPage() {
				pageUtil.nextPage(this)
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F8F9FB;
	}

	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 7%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}


	/**本页选项卡0的css代码**/
	.commoncss0 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**订单列表的css代码**/
	.commoncss1 {
		margin-top: 0%;
		font-size: 26rpx;
		background-color: #ffffff !important;
	}


	.price {
		color: #ff5500;
	}

	.orderNo {
		padding: 3%;
	}

	.ellipsisText {
		width: 350rpx !important;
		/* 超出范围的显示... */
		overflow: hidden;
		/*隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/* 超出部分省略号 */
	}
</style>
